{% extends 'base/base.html' %}
{% load static %}

{% block title %}CoolYunTest-仪表盘{% endblock %}

{% block extra_css %}
    <link rel="stylesheet" href="{% static 'products/css/dashboard.css' %}">
{% endblock %}


{% block content %}
    <div class="bg-light">
        <!-- 系统公告 -->
        <div class="container mt-4">
            <div class="alert alert-secondary alert-dismissible fade show">
                <i class="fas fa-bullhorn me-2"></i>
                尊敬的各位用户，您好，由于我司进行网络调整，25日08：00-26日22:00平台暂停提供服务...
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        </div>

        <!-- 核心指标 -->
        <div class="container mt-4">
            <div class="row g-4">
                <div class="col-md-3">
                    <div class="card metric-card">
                        <div class="card-body">
                            <h5><i class="fas fa-diagram-project text-primary me-2"></i>流程图数</h5>
                            <h2 id="flowchart-count">0</h2>
                        </div>
                    </div>
                </div>
                <!-- 重复类似结构添加其他指标 -->
            </div>
        </div>

        <!-- 可视化图表 -->
        <div class="container mt-4">
            <div class="row g-4">
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-body">
                            <h5>用例通过率</h5>
                            <div class="progress-ring">
                                <span>0%</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 其他图表 -->
            </div>
        </div>

        <!-- 任务概况 -->
        <div class="container mt-4">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-8">
                            <div id="task-chart"></div>
                        </div>
                        <div class="col-md-4">
                            <h5>任务状态分布</h5>
                            <ul class="list-group">
                                <li class="list-group-item d-flex justify-content-between">
                                    已完成 <span class="badge bg-primary">0</span>
                                </li>
                                <!-- 其他状态 -->
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>>

{% endblock %}



{% block extra_scripts %}
    <script>
        $(document).ready(function () {
            // 获取数据
            $.get('/api/dashboard/', function (data) {
                // 更新指标
                $('#flowchart-count').text(data.metrics.flowchart)

                // 更新环形图
                $('.progress-ring').each(function () {
                    const value = data.charts.pass_rate
                    $(this).css('background',
                        `conic-gradient(#2196F3 ${value}%, #eee ${value}% 100%)`)
                })

                // 初始化折线图（需引入echarts）
            })
        })
    </script>
{% endblock %}
